<template>
	<view class="page">
		<!-- 	轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" class="carousel" indicator-color="rgb(226 216 216 / 30%)"
			indicator-active-color="#ebe7e7">
			<swiper-item>
				<image src="https://images.weserv.nl/?url=img1.doubanio.com/view/photo/l/public/p2410755737.webp" @click="pathclick">
				</image>
			</swiper-item>
			<swiper-item>
				<image src="https://images.weserv.nl/?url=//img3.doubanio.com/view/photo/l/public/p2556561071.webp" @click="pathclick">
				</image>
			</swiper-item>
			<swiper-item>
				<image src="https://images.weserv.nl/?url=img1.doubanio.com/view/photo/l/public/p2559849368.webp" @click="pathclick">
				</image>
			</swiper-item>
			<swiper-item>
				<image src="https://images.weserv.nl/?url=img3.doubanio.com/view/photo/l/public/p2432517600.webp" @click="pathclick">
				</image>
			</swiper-item>
		</swiper>
		<!-- 分栏标题组件 -->
		<titles :icon="arricon[0]"></titles>
		<!-- 	热门超英数据 -->

		<scroll-view class="scroll" scroll-x @scrolltolower="scrolltolower">
			<view class="scroll_main">
				<view class="scroll_item" v-for="(item,index) in hotData" :key="index" @click="pathclick(item)">
					<image :src="item.images.small" class="scroll_img"></image>
					<view class="scroll_name">{{item.title}}</view>
					<view class="scroll_pf">
						<score :innerScore="item.rating.average" :showNum="1"></score>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 分栏标题组件 -->
		<titles :icon="arricon[1]"></titles>

		<!-- 热门预告数据 -->
		<view class="video">
			<video controls v-for="(item,index) in videoarray" :key="index" :poster="item.poster" :src="item.src"
				:id="item.id" @play="videoPlay(item.id)" class="video_item"></video>
		</view>
		<!-- 分栏标题组件 -->
		<titles :icon="arricon[2]"></titles>


		<!-- 猜你喜欢数据 -->
		<view class="GuessYouLikeIt">
			<view class="GuessYouLikeIt_item" v-for="(item,index) in guessData" :key="index" >
				<image
					:src="item.images.small"
					class="GuessYouLikeIt_item_img" @click="pathclick(item)"></image>
				<view class="GuessYouLikeIt_item_con" @click="pathclick(item)">
					<view class="scroll_name">{{item.title}}</view>
					<score :innerScore="item.rating.average" :showNum="0"></score>
					<view class="GuessYouLikeIt_item_infon" v-if="item.mainland_pubdate">{{item.mainland_pubdate}}</view>
					<view class="GuessYouLikeIt_item_infon">
						<text  class="textp">{{ggenreser(item.genres)}}</text>
					</view>
					<view class="GuessYouLikeIt_item_infon">时长:{{item.durations[0]}}</view>
					<view class="GuessYouLikeIt_item_infon">点赞数:{{item.collect_count}}</view>
				</view>
				<!-- 点赞 -->
				<view class="GuessYouLikeIt_item_dianz">
					<view @click="dianz(item,$event)" :data-gindex="index">
						<image src="https://tilin.gitee.io/super_hero_preview/static/icons/praise.png" class="praise">
						</image>
						<view class="GuessYouLikeIt_item_dianz_i">点赞</view>
						<view class="GuessYouLikeIt_item_dianz_orice" :animation="animationdataarray[index]">
							+1
						</view>
					</view>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	import titles from '../../components/title.vue' //标题组件
	import score from '../../components/score.vue' //评分组件
	export default {
		data() {
			return {
				title: 'Hello',
				hotData: [], //热门超英数据
				hotCount: 10, //每次请求数据量
				arricon: [{
						icon: 'https://tilin.gitee.io/super_hero_preview/static/icons/hot.png',
						tite: '热门超英'
					},
					{
						icon: 'https://tilin.gitee.io/super_hero_preview/static/icons/interest.png',
						tite: '热门预告'
					},
					{
						icon: 'https://tilin.gitee.io/super_hero_preview/static/icons/guess-u-like.png',
						tite: '猜你喜欢'
					}
				],
				hotData: [], //热门超英数据
				hotCount: 10, //每次请求数据量
				videoarray: [{
						poster: 'https://img1.baidu.com/it/u=3771860367,747888380&fm=224&fmt=auto&gp=0.jpg',
						src: '../../static/video/301470223.mp4',
						id: 'video_w'
					},

					{
						poster: 'https://img0.baidu.com/it/u=1707779877,2102281656&fm=26&fmt=auto&gp=0.jpg',
						src: 'http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_d35f9f934fa64fb7b1c2f225337cf55c.f0.mp4?vkey=EF84BEC7B073D830522ADCDC3936E4F97318D878FD5B75D24D2B83D465724F1E8FD7465E3D1053139E75BFCA0112DFB33FE3AA851730FAEA841047CDEEDBA726E6FEF84FC3AF0005F46ED2A5BCB107A5D3D8AFD06458E4CC&sha=0',
						id: 'video_t'
					},

					{
						poster: 'https://img0.baidu.com/it/u=1707779877,2102281656&fm=26&fmt=auto&gp=0.jpg',
						src: 'http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_d35f9f934fa64fb7b1c2f225337cf55c.f0.mp4?vkey=EF84BEC7B073D830522ADCDC3936E4F97318D878FD5B75D24D2B83D465724F1E8FD7465E3D1053139E75BFCA0112DFB33FE3AA851730FAEA841047CDEEDBA726E6FEF84FC3AF0005F46ED2A5BCB107A5D3D8AFD06458E4CC&sha=0',
						id: 'video_f'
					},
					{
						poster: 'https://img1.baidu.com/it/u=3771860367,747888380&fm=224&fmt=auto&gp=0.jpg',
						src: '../../static/video/301470223.mp4',
						id: 'video_s'
					}
				],
				// 视频上下文对象
				videoCtx: null,
				videoId: null,
				guessData:[],
				guessCount:5,
				dianzshu:0,
				animationdata:{
					
				},
				animation:null,
				animationdataarray:[{},{},{},{},{}]
			}
		},
		components: {
			titles,
			score
		},
		onUnload() {
			//页面卸载的时候清除动画
			this.animationdata = {}
			this.animationdataarray = [{},{},{},{},{}]
		},
		onHide() {
			//页面隐藏暂停视频播放 针对微信小程序及app端
			if(this.videoCtx){
				this.videoCtx.pause()
			}
		},
		onLoad() {
			this.gethhas() //请求热门超英数据
			this.getGuessData()//请求猜你喜欢数据
			//在页面创建的时候，创建一个临时动画
			this.animation = uni.createAnimation()
		},
		onPullDownRefresh(){
			//模拟下拉刷新请求数据
			Promise.all([this.gethhas(),this.getGuessData()]).then((results)=>{
				setTimeout(()=>{
					uni.showToast({
						icon: "success",
						title: '刷新成功'
					});
					uni.stopPullDownRefresh()
				},1000)
				
			})
		},
		methods: {
			//跳转详情
			pathclick(item){
				uni.navigateTo({
				    url: '../nedek/nedek?id=' + item.id
				});
				
			},
			//点赞
			dianz(i,e){
				// console.log(e.currentTarget.dataset.gindex)
				var idx = e.currentTarget.dataset.gindex
				
				if(i.collect_count > i.dianz ){
					uni.showToast({
						icon: "none",
						title: '您已经点过赞啦!'
					});
					return
				}
				//构建动画数据，并且通过step来表示这组动画的完成
				this.animation.translateY(-70).opacity(1).step({duration:400})
				//导出动画数据到view组件，实现动画效果
				 // this.animationdata = this.animation.export()
				this.animationdata = this.animation
			    this.animationdataarray[idx] = this.animationdata.export()
				i.dianz = i.collect_count
				i.collect_count ++
				
				//还原动画
				setTimeout(()=>{
					//因为javascript的原因，数组某个位置的元素改变并不会被数组监控到，解决方法就是使用数组那些已经被监控的方法
					this.animationdataarray.splice(idx,1,this.animation.translateY(-70).opacity(0).step({duration:400}).export())
					
				},500)
				// console.log(i.collect_count)
			},
			// 获取猜你喜欢数据
			getGuessData() {
				const {
					subjects: dataRes
				} = require('../../static/mock/weekly.json')
				// 截取5条数据，每次展示5条
				let newArr = []
				for (let i = 0; i < dataRes.length; i++) {
					if (i + this.guessCount - 5 < this.guessCount) {
						let item = dataRes[i + this.guessCount - 5].subject
						// 对图片做处理
						item.images.small = item.images.small.replace('https://', 'https://images.weserv.nl/?url=')
						newArr.push(item)
					}
				}
				this.guessData = newArr
				console.log(this.guessData)
			},
			// 视频播放
			videoPlay(id) {
				// 解决真机无限播放暂停问题
				if (this.videoId == id) {
					return false
				}
				this.videoCtx = uni.createVideoContext(id)
				// 确保只能有一个视频被播放，其它的暂停
				this.videoarray.forEach(item => {
					if (item.id == id) {
						this.videoCtx.play()
						this.videoId = id
					} else {
						uni.createVideoContext(item.id).pause()
					}
				})
			},
			//热门超英滑动到右边
			scrolltolower() {
				if (this.hotCount == 50) {
					uni.showToast({
						icon: "none",
						title: '没有更多数据了'
					});
				} else {
					this.hotCount += 10 //再次请求10条数据
					this.gethhas()
				}
			},
			//数组转字符串
			ggenreser(i){
				let  a = i.join('/')
				return a
			},
			gethhas() {
				// 特别注意：非H5端不能用uni.request来请求本地json数据！！！
				// const dataRes=await this.$http({url:'/new_movies.json'})
				const {
					subjects: dataRes
				} = require('../../static/mock/top.json')
				// 截取10条数据
				let newArr = []
				for (let i = 0; i < dataRes.length; i++) {
					if (i + this.hotCount - 10 < this.hotCount) {
						let item = dataRes[i + this.hotCount - 10]
						// 对图片做处理
						item.images.small = item.images.small.replace('https://', 'https://images.weserv.nl/?url=')
						newArr.push(item)
					}
				}
				this.hotData = [...this.hotData, ...newArr]
				// console.log(this.hotData)
			}
		}
	}
</script>

<style>
	.GuessYouLikeIt_item_dianz_orice{
		text-align: center;
		color: #feab2a;
		opacity: 0;
		font-weight: bold;
	}
	.GuessYouLikeIt_item_dianz_i {
		color: #feab2a;
		font-size: 30rpx;
	}

	.praise {
		width: 50rpx;
		height: 50rpx;
		margin-left: 6rpx;
	}

	.GuessYouLikeIt_item_infon {
		color: grey;
		font-size: 27rpx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
		height: 40rpx;
		line-height: 40rpx;
	}

	.GuessYouLikeIt_item_img {
		width: 180rpx;
		height: 240rpx;
	}

	.GuessYouLikeIt_item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.GuessYouLikeIt_item_con {
		width: 380rpx;
		margin-left: 20rpx;
	}

	.GuessYouLikeIt_item_dianz {
		display: flex;
		align-items: center;
		border-left: dashed 1PX #ccc;
		justify-content: center;
		width: 150rpx;
	}

	.GuessYouLikeIt {
		padding: 10rpx 20rpx;
		background: #fff;
	}

	.video {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0rpx 20rpx;
		background: #fff;
	}

	.video_item {
		width: 350rpx;
		height: 220rpx;
		margin-bottom: 15rpx;
	}

	.scroll {
		background: #fff;
		margin-bottom: 10rpx;
		padding: 10rpx 0;
	}

	.scroll_main {
		display: flex;
	}

	.scroll_item {
		width: 207rpx;
		margin-left: 15rpx;

	}

	.scroll_name {
		font-size: 28rpx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
		font-weight: 600;
	}

	.scroll_pf {
		font-size: 25rpx;
	}

	.scroll_img {
		width: 200rpx;
		height: 275rpx;
	}

	.carousel {
		width: 100%;
		height: 440rpx;
	}

	.carousel image {
		width: 100%;
		height: 100%;
	}
	.textp{
		font-size: 30rpx;
	}
</style>
